<template>                  
    <div ignore="2" class="SwitchMap"  id="SwitchMapCtrl" :style="{right: getIsHideAssist ? '40px' : '500px'}">
        <div class="mode-wrap" @mouseover="fnOver" @mouseout="fnOut">
            <div class="mode-type" v-for="(item,index) in modeData"  @click="fnClick(item,index,modeData)" :key="item.title">
                <div class="mode-img">
                    <span class="mode-img_box"><img  :src=item.icon /></span>
                    <span class="mode-wrap_text">{{item.title}}</span>
                </div>
            </div>
        </div>
    </div>    
</template>
<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
import MapCommon from '@/util/MapCommon';
import publishObjectPath from '@/util/configRegistry';
import './SwitchMap.less';
// const $ = require('jquery');
@Component({
    mixins: [MapCommon],
})
export default class GisSwitchMap extends Vue {

    @Prop() public options: any;
    // 监听地图初始化
    public mapComponent: any;
    public direction: string = 'down';
    //  this.map=this.options.map;
    public modeData: any[] = [];
    private clientId: string = '';
    private clientSecret: string = '';
    private curMode: any = {};
 
    get getIsHideAssist() {
      return this.$store.state[('layoutModule' as any )].isHideAssist;
    }

    private created() {
        this.modeData = this.options.baseLayers;
        this.curMode = this.modeData[0];
    }
    private mounted() {
        if (publishObjectPath && publishObjectPath.value && publishObjectPath.value.egis) {
            this.clientId = publishObjectPath.value.egis.clientId;
            this.clientSecret = publishObjectPath.value.egis.clientSecret;
        }
        // 获取地图，地图加载完成后进入回调
        const self: any = this;
        self.resolveMap(this.options.mapId).then((event: any) => {
            this.initMap(event.map);
        });
    }
    private initMap(map?: any) {
        this.mapComponent = () => {
            return map;
        };
    }
    /**
     * 切换底图
     * @method
     * @param options 必填
     * @param options.item {Object} 点击的底图参数
     * @param options.map {Object} map对象
     * */
    // private layerChange(options: any) {
    //     window.G.utils.LayerUtil.switchBaseLayer({
    //         map: options.map,
    //         layerOpts: options.item,
    //     });
    // }
    private layerChange(options: any) {
        const resthttp = new g2.core.RestHttp({
            client_id: this.clientId,
            client_secret: this.clientSecret,
        });
        const originLayers = options.item.layers;
        if ( Array.isArray(originLayers)) {
            originLayers.forEach((item, index) => {
                if (item.tileType === 102 && !item.restHttp) {
                    // 天地图底图-忽略resthttp
                    // item.restHttp = resthttp;
                }
            });
        } else {
            options.item.restHttp = resthttp;
        }
        G.utils.LayerUtil.switchBaseLayer({
            map: options.map,
            layerOpts: options.item,
        });
    }
    // 鼠标划过
    private fnOver() {
        const $obj = $('.mode-wrap');
        const $aChildren: any = $obj.children();
        const self = this;

        for (const iterator of $aChildren) {
            self.fnanimate($(iterator), self.direction);
        }
        // $aChildren.each((index: any, e: any) => {
        //     console.log(this)
        //     console.log($(this))
        //     console.log($(self))
        //     debugger
        //     self.fnanimate($(this), self.direction);
        // });
    }
    // 鼠标移出
    private fnOut() {
        const $obj = $('.mode-wrap');
        const $aChildren: any = $obj.children();
        const self = this;

        for (const iterator of $aChildren) {
           if ($(iterator).index() !== 0) {
                self.fnOutAnimate($(iterator), self.direction);
            }
        }
    }
    private fnClick( item: any, index: any, all: any) {
        if ( this.curMode.title === item.title) {
            return ;
        }
        this.curMode = item;
        const obj: any = {
            item ,
            map: this.mapComponent(),
        };
        this.layerChange(obj);
        // this.fnOut();

        this.modeData.splice(index, 1);
        this.modeData.unshift(item);
        this.$nextTick( () => {
            const $obj = $('.mode-wrap');
            const $aChildren: any = $obj.children();
            // $($aChildren[0]).css('margin-top', '0px');
            $($aChildren[0]).stop().animate({ marginTop : 0, opacity : 1}, 300);
        });
    }
    private fnOutAnimate(obj: any, type: any) {
        switch (type) {
            case  'up':
                obj.stop().animate({ marginTop : 0, opacity : 0}, 300);
                break;

            case  'down':
                obj.stop().animate({ marginTop : 0, opacity : 0}, 300);
                break;

            case  'left':
                obj.stop().animate({ marginLeft : 0, opacity : 0}, 300);
                break;

            case  'right':
                obj.stop().animate({ marginLeft : 0, opacity : 0}, 300);
                break;
        }
    }
    private fnanimate(obj: any, type: any) {
        const t = obj.height() + 10;
        const l = obj.width() + 10;
        switch (type) {
            case  'up':
                obj.stop().animate({marginTop: -obj.index() * t + 'px', opacity: 1}, 300);
                break;

            case  'down':
                obj.stop().animate({marginTop: obj.index() * t + 'px', opacity: 1}, 300);
                break;

            case  'left':
                obj.stop().animate({marginLeft: -obj.index() * l + 'px', opacity: 1}, 300);
                break;

            case  'right':
                obj.stop().animate({marginLeft: obj.index() * l + 'px', opacity: 1}, 300);
                break;
        }
    }

}
</script>